import React, { useCallback } from "react"

import { Field_FormSave, Field_name_id } from "@/components/utils/field.list"

import { FormProps } from "@/components/modal/form.modal"
import adminCommodityService from "@/services/admin.commodity.service"
import { FormRender, FormUpload } from "@whzhuke/antd"
import useForm from "antd/es/form/hooks/useForm"
import { useFetch } from "@whzhuke/usehook"

interface Props {
  values?: any
}
export const EditManger: React.FC<Props & FormProps> = props => {
  const { values, onDone } = props
  const [form] = useForm<any>()
  const onFinish = useCallback(data => {
    adminCommodityService[values ? "edit" : "add"]({ ...data }).then(res => {
      onDone?.()
    })
  }, [])
  const [{ data: list }] = useFetch(adminCommodityService.list, [{ pageSize: 99, pageNum: 0 }])

  const [{ data: details }] = values?.id ? useFetch(adminCommodityService.item, [{ id: values?.id }]) : [{ data: null }]
  return (
    <FormRender
      form={form}
      initialValues={
        details
          ? {
              ...details
            }
          : {
              active: !0
            }
      }
      layout="horizontal"
      preserve={false}
      onFinish={onFinish}
      labelCol={{ span: 8 }}
      wrapperCol={{ span: 16 }}
      style={{ width: 600 }}
      fieldList={[
        values ? Field_name_id : undefined,
        {
          fieldType: "diy",
          component: <FormUpload maxCount={1} multiple={false} />,
          formItemConfig: { label: "上传封面图", name: "file", required: !0 }
        },
        {
          fieldType: "input",
          formItemConfig: { required: !0, name: "name", label: "商品名称" },
          config: { placeholder: "输入商品名称", disabled: !!values }
        },
        {
          fieldType: "number",
          formItemConfig: { required: !0, name: "marketPrice", label: "市场价" },
          config: { placeholder: "请输入市场价", disabled: !!values }
        },
        {
          fieldType: "input",
          formItemConfig: {
            required: !values,
            name: "stockNums",
            label: "库存量"
          },
          config: { placeholder: "商品库存量", disabled: !!values }
        },
        {
          fieldType: "textArea",
          formItemConfig: { name: "description", label: "商品描述" },
          config: {
            placeholder: "请输入商品描述"
          }
        },
        { ...Field_FormSave, formItemConfig: { wrapperCol: { offset: 8, span: 16 } } }
      ]}
      autoComplete="off"
    />
  )
}
